<template>
    <div class="wzt-box">
        <header class="wzt-head">
            <i @click="wztreturn()" class="wzticon iconfont icon-jiantou"></i>
            <span>SQT</span>
        </header>
        <div class="wzt-top">
            <div class="tit">{{sqt_balance}}</div>
            <div class="btn" @click="toTransfer">
                <img src="../../assets/img/personal-icon-transferx.png" class="img" />
                一键划转
            </div>
        </div>
        <div style="background-color: rgba(255, 46, 103, .1);width: 100%;height: 43px;line-height: 43px;color: #FF2E67;">
            <span style="font-size: 14px;color: #333;margin-left: 15px;margin-right: 4px;font-weight: bold;">当前贡献值</span>
            <span style="font-size: 14px;font-weight: bold;">{{tb_user_contribution}}</span>
            <img style="vertical-align: middle;width: 16px;float: right;margin-top: 13px;margin-right: 14px;" @click="jumpTask" src="../../assets/img/contribution-icon-more.svg" alt="">
            <span @click="jumpTask" style="float: right;margin-right: 4px;font-weight: bold;">去做任务</span>
        </div>
        <div class="wzt-content">
            <!-- <van-tabs v-model="active">
                <van-tab title="银行收益">
                    <div v-if="daySqtDetailList.length>0">
                        <div class="wzt-detail" v-for="val in daySqtDetailList" :key="val.id">
                            <p class="wzt-active" v-if="val.payType == 0">-{{val.payNumber}}</p>
                            <p class="wzt-active" v-if="val.payType == 1" style="color: #01C29C;">+{{val.payNumber}}</p>
                            <div class="yinhang">银行收益 <span>{{val.createTime.split(' ')[0]}}</span></div>
                        </div>
                    </div>
                    <noData v-else></noData>
                </van-tab>
                <van-tab title="其他收支">
                    <div v-if="tbUserSqtDetailList.length>0">
                        <div class="wzt-detail" v-for="val in tbUserSqtDetailList" :key="val.id">
                            <p class="wzt-active" v-if="val.payType == 0">-{{val.payNumber}}</p>
                            <p class="wzt-active" v-if="val.payType == 1" style="color: #01C29C;">+{{val.payNumber}}</p>
                            <div class="yinhang">{{val.payFrom}} <span>{{val.createTime}}</span></div>
                        </div>
                    </div>
                    <noData v-else></noData>
                </van-tab>
            </van-tabs> -->
            <div v-if="tbUserSqtDetailList.length>0">
                <div class="wzt-detail" v-for="val in tbUserSqtDetailList" :key="val.id">
                    <p class="wzt-active" v-if="val.payType == 0">-{{val.payNumber}}</p>
                    <p class="wzt-active" v-if="val.payType == 1" style="color: #01C29C;">+{{val.payNumber}}</p>
                    <div class="yinhang">{{val.payFrom}} <span>{{val.createTime}}</span></div>
                </div>
            </div>
            <noData v-else></noData>
        </div>
    </div>
</template>

<script>
    import noData from "../public/noData"
    import {
        Tab,
        Tabs
    } from 'vant'
    export default {
        name: "wztdetail",
        data() {
            return {
                userId: "",
                sqt_balance: 0,
                daySqtDetailList: [],
                tbUserSqtDetailList: [],
                active: 0,
                tb_user_contribution:0,
                hasPayPwd:''
            }
        },
        components: {
            noData,
            [Tab.name]: Tab,
            [Tabs.name]: Tabs,
        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.initData();
        },
        methods: {
            initData() {
                this.getBalance();
                this.$http.post(this.utils.config + "/netmall/app/person/api/getSQTDetail?user_id=" + this.userId, {
                    user_id: this.userId
                }).then((data) => {
                    this.daySqtDetailList = data.data.result.daySqtDetailList;
                    this.tbUserSqtDetailList = data.data.result.tbUserSqtDetailList;
                })
            },
            //跳转玩赚页面
            jumpTask(){
                this.$router.push('/playGame');
            },
            toTransfer() {
                if(this.hasPayPwd == 0){
                    this.$router.push("/usernameflex/payPassword0");
                }
                if(this.hasPayPwd == 1){
                    this.$router.push("/transfer");
                }
            },
            wztreturn() {
                this.$router.go(-1);
            },
            // 获取现有余额
            getBalance() {
                this.$http.post(`${this.utils.config}/netmall/app/person/api/getPersonCenterData?user_id=${this.userId}`, {
                    user_id: this.userId
                }).then((data) => {
                    this.sqt_balance = data.data.result.tbUserSqt.balance;
                    this.tb_user_contribution = data.data.result.tb_user_contribution.contributionValue;
                    this.hasPayPwd = data.data.result.tbMnUser.hasPayPwd;
                })
            }
        }
    }
</script>

<style scoped>
    @import "../../assets/font/iconfont.css";

    .wzt-box {
        background: rgba(255, 255, 255, 1);
        min-height: 100%;
        overflow: hidden;

    }

    .wzt-head {
        width: 100vw;
        text-align: center;
        position: fixed;
        height: 41px;
        line-height: 41px;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #fff;
    }

    .wzt-top .tit {
        margin-top: 105px;
        font-size: 30px;
        color: #fff;
    }

    .wzt-top .btn {
        margin-top: 19px;
        width: 200px;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FF2E67;
        background-color: #FFEDE7;
        border-radius: 22px;
    }

    .wzt-top .btn .img {
        width: 24px;
        height: 24px;
        margin-right: 4px;
    }

    .wzt-top {
        height: 231px;
        background-image: linear-gradient(to bottom, #FF5AA0, #FF2E67);
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .wzt-content {
        padding: 0 14px;
    }

    .wzticon {
        font-size: 18px;
        font-weight: 900;
        display: inline-block;
        position: absolute;
        left: 16px;
    }

    .wzt-detail {
        width: 100%;
        height: 76px;
        background: rgba(216, 216, 216, 0);
        overflow: hidden;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        ;
    }

    .wzt-active {
        margin: 19px auto auto 1px;
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: rgba(255, 46, 103, 1);
        line-height: 19px;
    }

    .yinhang {
        margin-top: 6px;
        height: 17px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(136, 136, 136, 1);
        line-height: 17px;
    }

    .yinhang span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(136, 136, 136, 1);
        line-height: 17px;
        display: inline-block;
        float: right;
    }

    .wzt-active-slect {
        margin: 19px auto auto 1px;
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #01C29C;
        line-height: 19px;
    }
</style>